<template>
    <div class="liveSet">
		<div class="table-bar">
		  <el-button type="primary" @click="handleAdd">添加活动</el-button>
		</div>
        <div class="liveSet_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">活动列表<i class="el-icon-close"></i></div>
		</div>
        <div class="partnerList_table">
                <div class="partnerList_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>序号</th>
							<th>活动名称</th>
							<th>参与人数</th>
							<th>访问人数</th>
							<th>开始时间</th>
							<th>结束时间</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i" v-if="v.status!=0">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td>{{v.name}}</td>
							<td>{{v.join_num}}</td>
							<td>{{v.support_num}}</td>
							<td>{{v.visit_num}}</td>
							<td>{{$moment(v.start_time*1000).format('yyyy-MM-DD')}}</td>
							<td>{{$moment(v.end_time*1000).format('yyyy-MM-DD')}}</td>
							<td>
								<button class="editor" @click="toParty(v.id)">参数配置</button>
                                <button class="yellow"  @click="toLike(v.id)">删除</button>
								<button class="shelves" @click="toStatics(v.id)">编辑</button>
							</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="10">当前数据空空如也</td></tr>
					</table>
					<div class="partnerList_bottom_page">
						<div class="partnerList_bottom_page_left">
							<div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
								<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
							</div>全选
							<!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
						</div>
						<div class="partnerList_bottom_page_right">
							<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="page"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="pageSize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="total"
								background>
							</el-pagination>
						</div>
					</div>
				</div>
            </div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                checkAll:false,
                page:1,
                pageSize:10,
                total:0,
                checkBoxAll:[],				// 选中的数据
                shelvesAlls:[],
                tableList:[],
            }
        },
        mounted() {
            this.getSetList()
        },
        methods: {
            // 获取直播配置列表o
            getSetList(){
                let params = {
                    page:this.page,
                    pagesize:this.pageSize
                }
                this.$http.post('/api/root/party/actList',params).then(res=>{
                    console.log(res,'活动列表');
                    if(res.code==1){
                        this.tableList = res.data.data?res.data.data:[];
                        this.total = res.data.count
                    }
                })
            },

            // 节目列表
            toParty(id){
                this.$router.push({name:'partyList',query:{id}})
            },
            
            // 点赞列表
            toLike(id){
                this.$router.push({name:'likeList',query:{id}})
            },
            
            // 数据统计
            toStatics(id){
                this.$router.push({name:'partyStatics',query:{id}})
            },
            


            // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index != -1){
						arr.splice(index,1);
						this.shelvesAlls.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].id);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
					this.shelvesAlls.push(this.tableList[v].id.toString());;
				})
				}else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},

            //更改直播配置
            toChange(id,sta){
                let status = sta==0?1:0;
                this.$http.post('/api/root/SystemConfig/changeStatus',{id,status}).then(res=>{
                    console.log(res,'直播配置结果');
                    if(res.code==1){
                        this.$message.success('操作成功')
                        this.getSetList()
                    }else{
                        this.$message.warning(res.msg)
                    }
                })
            },

        	handleSizeChange(val) {
				this.pageSize = val;
				this.getEstateList()
			},
			handleCurrentChange(val) {
			    this.page = val;
				this.getEstateList()
			},
        },
    }
</script>
<style lang="less">
    @import 'index.less';
</style>